<template>
<div id="role-manager">
    <div class="add-role">
        <my-button
            :type="'add'"
            :link="true"
            :to="{name: 'addRole'}"
        >添加角色</my-button>
    </div>
    <div class="table-layout">
        <div class="grid-layout">
            <div class="thead">
                <div class="th"></div>
                <div class="th">#</div>
                <div class="th">角色名称</div>
                <div class="th">角色描述</div>
                <div class="th">操作</div>
            </div>
            <div class="tbody">
                <div class="tr" v-for="item in roleList" :key="item.rid">
                    <div class="td" @click="handleClickOpen(item.rid)">></div>
                    <div class="td">{{item.rid}}</div>
                    <div class="td">{{item.roleName}}</div>
                    <div class="td">{{item.roleDesc}}</div>
                    <div class="td">
                        <my-button :type="'delete'" class="delete">删除</my-button>
                        <my-button :type="'edit'" class="edit">编辑</my-button>
                        <my-button 
                            :type="'setting'"
                            class="setting"
                            :link="true"
                            :to="{name: 'assignAuth', params: {rid: item.rid, role: item}}"
                        >分配权限</my-button>
                    </div>
                    <!-- 隐藏内容 -->
                    <div 
                        v-if="item.children"
                        :class="['auth-tree', { 
                            'auth-height': item.rid !== validataRid 
                        }]"
                        @click="handleClickDeleteThis"
                    >
                        <div class="auth-one" v-for="one in item.children" :key="one.aid">
                            <span class="span-one" :data-aid="one.aid">{{one.authName}}</span>
                            <div class="auth-two" v-if="one.children">
                                <div v-for="two in one.children" :key="two.aid" class="span-two-p">
                                    <span class="span-two" :data-aid="two.aid">{{two.authName}}</span>
                                    <div v-if="two.children" class="auth-three">
                                        <span 
                                            v-for="three in two.children"
                                            :key="three.aid" 
                                            class="span-three"
                                            :data-aid="three.aid"
                                        >{{three.authName}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { 
    roleList, 
    chooseRoleAndDeleteAuth 
} from '../../config/data'
import { messageTip } from '../JS'
export default {
    name: "roleList",
    data() {
        return {
            roleList: [],
            rid: "",
            validataRid: "",
            pre: 300
        }
    },
    created() {
        this.getRoleListData()
    },
    methods: {
        async handleClickDeleteThis(e) {
            if(e.target.constructor === HTMLDivElement) return;
            let nowt = Number(Date.now())
            if(nowt - this.pre <= 300) {
                messageTip({content: "删除的太快了"})
                return;
            }
            this.pre = nowt
            let isDeleteBool = window.confirm("确定删除？")
            if(!isDeleteBool) return false;
            let result = await chooseRoleAndDeleteAuth({
                rid: this.rid,
                aid: e.target.dataset.aid
            })
            if(result.fsBool) {
                this.roleList = result.data.roleList
            }
        },
        handleClickOpen(rid) {
            if(this.validataRid === rid) {
                this.validataRid = ""
                return;
            }
            this.validataRid = rid
            this.rid = rid
        },
        async getRoleListData() {
            let result = await roleList()
            this.roleList = result.data.roleList
        }
    }
}
</script>

<style scoped>
#role-manager {
    height: 100%;
}
.add-role {
    display: flex;
    align-items: center;
    width: 100%;
    height: 50px;
    line-height: 50px;
}
.table-layout {
    overflow-y: scroll;
    height: calc(100% - 50px - 15px);
    margin-top: 15px;
}
.table-layout::-webkit-scrollbar {
    display: none;
}
.open-tree {
    cursor: pointer;
    transition: background-color 0.32s;
}
.open-tree:hover {
    background-color: #ddd;
}
.grid-layout {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 42px auto;
    border-top: 1px solid #cecece;
    border-left: 1px solid #cecece;
    text-align: center;
    line-height: 42px;
    white-space: nowrap;
}
.thead {
    display: grid;
    grid-template-columns: 64px 64px repeat(3, 1fr);
    background-color: #e9e9e9;
    border-bottom: 1px solid #cecece;
}
.th {
    border-right: 1px solid #cecece;   
}
.tbody .tr{
    overflow: hidden;
    display: grid;
    grid-template-columns: 64px 64px repeat(3, 1fr);
}
.tbody .td {
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
}
.tbody .td:first-of-type {
    cursor: pointer;
}
.tbody .td:first-of-type:hover {
    background-color: #ddd;
}
.tbody .td:nth-of-type(3),
.tbody .td:nth-of-type(4) {
    min-width: 145px;
}
.thead .th:nth-of-type(5),
.tbody .td:nth-of-type(5) {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 200px;
}
.tbody .td .delete,
.tbody .td .edit,
.tbody .td .setting {
    margin: 0 6px;
}
.auth-tree {
    grid-column: 1 / 6;
    border-right: 1px solid #cecece;
    border-bottom: 1px solid #cecece;
}
.auth-height {
    height: 0;
    border-bottom: none;
}
.auth-one {
    display: grid;
    grid-template-columns: 128px 1fr;
    border-top: 1px solid #acacac;
}
.span-two-p {
    display: grid;
    grid-template-columns: 1fr 2fr;
    border-top: 1px solid #acacac;
}
.auth-one:first-of-type,
.span-two-p:first-of-type {
    border-top: none;
}
.auth-three {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}
.span-one,
.span-two,
.span-three {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: center;
    width: 120px;
    height: 32px;
    text-align: center;
    padding: 3px 6px;
    margin: 3px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.32s;
}
.span-one {
    align-self: center;
    border: 1px solid rgb(0, 255, 255);
    background-color: rgba(0, 255, 255, 0.2);
}
.span-one:hover {
    background-color: rgba(0, 255, 255, 0.6);
}
.span-two {
    border: 1px solid rgb(255, 192, 203);
    background-color:rgba(255, 192, 203, 0.2);
}
.span-two:hover {
    background-color: rgba(255, 192, 203, 0.6);
}
.span-three {
    border: 1px solid rgb(228, 228, 65);
    background-color: rgba(228, 228, 65, 0.2);

}
.span-three:hover {
    background-color: rgba(228, 228, 65, 0.6);
}
</style>